import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import {
  createRouter,
  createWebHistory,
  createWebHashHistory,
} from "vue-router";
import { registerMicroApps, initGlobalState, start } from "qiankun";
import routes from "./router";
import { customLog } from "./utils/log";

const router = createRouter({
  history: createWebHistory("/"),
  routes,
});

const action = initGlobalState({
  name: "shunpeng",
  age: 18,
  sex: "max",
  isHandsome: true,
});
export { action };

action.onGlobalStateChange((state, prev) => {
  customLog("主应用 global state change: ", state, prev);
});

registerMicroApps(
  [
    {
      name: "sub-app-1", // app name registered
      entry: "//localhost:3000",
      container: "#sub-app-1-box",
      activeRule: "/sub-app-1",
      loader: (loading) => {
        customLog(`主应用 loading: ${loading}`);
      },
      props: {
        router,
        container: "#sub-app-1-box",
      },
    },
    {
      name: "sub-app-2", // app name registered
      entry: "//localhost:3001",
      container: "#sub-app-2-box",
      activeRule: "/sub-app-2",
      loader: (loading) => {
        customLog(`主应用 loading: ${loading}`);
      },
      props: {
        router,
        container: "#sub-app-2-box",
      },
    },
  ],
  {
    beforeLoad: (app) => customLog(`子应用 beforeLoad：${app.name}`),
    beforeMount: (app) => customLog(`子应用 beforeMount：${app.name}`),
    afterMount: (app) => customLog(`子应用 afterMount：${app.name}`),
    beforeUnmount: (app) => customLog(`子应用 beforeUnmount：${app.name}`),
    afterUnmount: (app) => customLog(`子应用 afterUnmount：${app.name}`),
  }
);

// start({
//   sandbox: {
//     experimentalStyleIsolation: true,
//   },
// });

const app = createApp(App);
app.use(router);
app.mount("#app");
